<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<%@ taglib uri="/WEB-INF/tlds/att.tld" prefix="att"%>
<!DOCTYPE HTML>
<html>
<head>
 <meta name="decorator" content="sysDefault"/>
<title></title>
<link rel="stylesheet" href="${staticPath}/lib/jQuery-File-Upload/9.5.2/css/jquery.fileupload.css">
<link rel="stylesheet" href="${staticPath}/lib/jQuery-File-Upload/9.5.2/css/jquery.fileupload-ui.css">
<script src="${staticPath}/lib/jQuery-File-Upload/9.5.2/js/vendor/jquery.ui.widget.js"></script>
<script src="${staticPath}/js/load-image.min.js" ></script>
<script src="${staticPath}/lib/jQuery-File-Upload/9.5.2/js/jquery.iframe-transport.js"></script>
<script src="${staticPath}/lib/jQuery-File-Upload/9.5.2/js/jquery.fileupload.js"></script>
<script src="${staticPath}/lib/jQuery-File-Upload/9.5.2/js/jquery.fileupload-process.js"></script>
<script src="${staticPath}/lib/jQuery-File-Upload/9.5.2/js/jquery.fileupload-image.js"></script>
<script src="${staticPath}/lib/jQuery-File-Upload/9.5.2/js/jquery.fileupload-audio.js"></script>
<script src="${staticPath}/lib/jQuery-File-Upload/9.5.2/js/jquery.fileupload-video.js"></script>
<script src="${staticPath}/lib/jQuery-File-Upload/9.5.2/js/jquery.fileupload-validate.js"></script>
<script src="${staticPath}/lib/jqueryTmpl/jquery.tmpl.js"></script>


<script id="template-upload" type="text/x-tmpl">
<tr>
       <td>
             <span class="preview"><img src="${'${'}thumbnailUrl_}"></span>
       </td>
       <td>
           <p class="name">${'${'}fileName_}</p>           
       </td>
       <td>
           <p class="size">${'${'}fileSize_} KB</p>
           
       </td>
	<td>
	    <div class="progress progress-success progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
	   <div class="bar" style="width:100;"></div></div>    
	</td>s
       <td>
           <button class="btn btn-primary start">
              <i class="icon-upload icon-white"></i>
              <span>Start</span>
           </button>
           <button class="btn btn-warning cancel">
              <i class="icon-ban-circle icon-white"></i>
              <span>Cancel</span>
           </button>           
       </td>
   </tr>
    </script>
<script>

$(function () {
    var url = '${contextPath}/sys/att/upload';
    var currentData = {};
    $('#fileupload').fileupload({
    	autoUpload: false,
        url: url,
        dataType: 'json',
        disableImageResize: /Android(?!.*Chrome)|Opera/.test(window.navigator.userAgent),
        previewMaxWidth: 100,
        previewMaxHeight: 100,
        previewCrop: true,
        add: function (e, data) {
        	alert(data.files[0].mozFullPath);
        	var dataFiles=  [{thumbnailUrl_:data.files[0].mozFullPath, fileName_: data.files[0].name, fileSize_:data.files[0].size }];
        	 var templateImpl =$('#template-upload').tmpl(dataFiles).appendTo('#files'); 
        	 data.content=templateImpl;
    	   $(".start", templateImpl).click(function () {
    		    currentData.bar = templateImpl;    		    
                $('<p/>').text('Uploading...').addClass("uploading").replaceAll($(this));
                data.submit();//上传文件
           });
    	   $(".cancel", templateImpl).click(function () {
                $('<p/>').text('cancel...').replaceAll($(this));
                data.abort();//取消上传
                $(templateImpl).remove();
    	   });
        },

        done: function (e, data) {
        	$(".uploading", data.content).text('上传成功');
        },
        progressall: function (e, data) {
            var progress = parseInt(data.loaded / data.total * 100, 10);
            $('.bar', currentData.bar).css(
                'width',
                progress + '%'
            );
        }
    });
});
</script>	

</head>
<body>
	<div class="container">   
	<span class="btn btn-success fileinput-button">
	<i class="icon-plus icon-white"></i>
	<span>Select files...</span>
	<input id="fileupload" type="file" name="files[]" multiple>
	<form:checkbox path="" value=""/>
	</span>
	<br>
	<br>
	<table role="presentation" class="table table-striped">
	<tbody id='files' class="files" data-toggle="modal-gallery" data-target="#modal-gallery">
	</tbody>
	</table>
	</div>
</body> 
</html>


	